<template>
  <circle
    :cx="centerX"
    :cy="centerY"
    :r="radius"
    fill="none"
    :stroke="strokeColor"
    :stroke-width="strokeWidth"
    :opacity="opacity"
    stroke-dasharray="2,2"
    class="orbit"
  />
</template>

<script setup lang="ts">
// Props
interface Props {
  centerX: number;
  centerY: number;
  radius: number;
  strokeColor?: string;
  strokeWidth?: number;
  opacity?: number;
}

const props = withDefaults(defineProps<Props>(), {
  strokeColor: 'rgba(255, 255, 255, 0.3)',
  strokeWidth: 1,
  opacity: 0.6
});
</script>

<style scoped>
.orbit {
  pointer-events: none;
}
</style>